<template>
	<view class="rh-datetime-picker-container">
		<view class="picker-item" @click="boo.show = true">
			<view class="picker-label">
				<slot name="label-icon"></slot>
				<text class="label-txt">{{label}}</text>
			</view>
			<view class="picker-content">
				<u-input
						v-model="emitValue"
						disabled :inputAlign="hasArrow ? 'right' : 'center'" fontSize="32rpx"
						disabledColor="#ffffff"
						:placeholder="placeholder"
						border="none"
						:customStyle="{
							'background-color': 'transparent'
						}"
				></u-input>
				<u-icon
						slot="right"
						v-if="hasArrow"
						name="arrow-right"
				></u-icon>
			</view>
		</view>
		<u-datetime-picker v-if="boo.hasTimePicker" :show="boo.show" v-model="date" ref="datetimePicker"
			:mode="mode" :closeOnClickOverlay="true" :title="pickerTitle" 
			@confirm="confirm" @close="boo.show = false" :minDate="dateTime"
		></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		props: {
			label: String,
			value: [String, Number, Array],
			dateTime:Number,
			placeholder: {
				type: String,
				default: () => {return '请选择'}
			},
			mode: {
				type: String,
				default: () => {return 'date'}
			},
			pickerTitle: {
				type: String,
				default: () => {return ''}
			},
			hasArrow: {
				type: Boolean,
				default: () => true
			},
			// dateTime:{
			// 	type: Number,
			// 	default: () => {return null}
			// }
		},
		watch: {
			value(val){
				this.boo.hasTimePicker = false
				if(val){
					this.emitValue = val
					this.$set(this, 'date', Number(new Date(this.value)))
				}else{
					this.emitValue = val
					this.$set(this, 'date', Number(new Date()))
				}
				this.$nextTick(() => {
					this.boo.hasTimePicker = true
				})
			},
		},
		data() {
			const vm = this
			return {
				emitValue: this.value,
				date: Number(new Date()),
				boo: {
					show: false,
					hasTimePicker: true,
				},
			};
		},
		mounted() {
			console.log(this.dateTime, 5656)
		},
		methods: {
			timestampToTime(timestamp) {
				let date = new Date(timestamp)
			  let Y = `${date.getFullYear()}-`;
			  let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1)
			  let strDate = Y+M;
			  return strDate;
			},
			confirm(e){
				let _self = this
				_self.emitValue = _self.timestampToTime(e.value)
				_self.$emit('input', _self.emitValue)
				_self.boo.show = false
				_self.$emit('change', _self.emitValue)
			},
		}
	}
</script>

<style scoped lang="scss">
	.rh-datetime-picker-container{
		width: 100%;
	}
	.picker-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.picker-label{
			display: flex;
			align-items: center;
			.label-txt{
				font-size: 32rpx;
				color: #666;
			}
		}
		.picker-content{
			flex: 1;
			display: flex;
			align-items: center;
		}
	}
</style>
